<template>
    <div class="order">
        <my-dji-top-nav />
        <div class="container ">
          <div class="order_main">
            <div class="order_info">
              <div class="info_left">
                <div class="img">
                  <img src="../assets/img/index/img/logo.png" alt="">
                </div>
                <div class="order_number">
                  <span class="number">订单号：{{order.order_id}}</span>
                  <span class="remaining">订单将在 {{day}} 天 {{hours}} 小时 {{minutes}} 分 {{seconds}} 秒后自动关闭，请尽快支付。</span>
                </div>
              </div>
              <div class="info_right" v-if="order!=''">
                <span>应付金额：<span class="total_price">¥{{order.total_price}}</span></span>
                <a-collapse default-active-key="1">
                  <a-collapse-panel key="1" header="订单详情">
                    <div class="info_detail">
                      <span class="info">订单号：{{order.order_id}}</span>
                      <span class="info">订单金额：<span class="price">￥{{price}}</span></span>
                      <span class="info">运费：￥{{order.total_price - price}}</span>
                      <div class="products">
                        <span class="info">订单商品：</span>
                        <div>
                          <span class="prod" v-for="item in order.goods_info" :key="item.id">{{item.goods_name}} × {{item.num}}</span>
                        </div>
                      </div>
                      <span class="info">收货信息：{{this.order.s_address.name+' '+this.order.s_address.phone+' '+this.order.s_address.area_name+this.order.s_address.desc+' '+post_code}}</span>
                    </div>
                  </a-collapse-panel>
                </a-collapse>
              </div>
            </div>
            <div class="payment">
              <h3>在线支付平台</h3>
              <div class="platform">
                <div class="weixin">
                  <div class="img">
                    <img src="../assets/img/pay/微信支付.svg" alt="">
                  </div>
                  <span>微信支付</span>
                </div>
                <div class="alipay">
                  <div class="img">
                    <img src="../assets/img/pay/支付宝.svg" alt="">
                  </div>
                  <span>支付宝<span class="tips">(不含花呗分期)</span></span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <bottom-nav />
    </div>
</template>

<script>
import BottomNav from '../components/BottomNav.vue'
import MyDjiTopNav from '../components/MyDjiTopNav.vue'

import {getOrder} from '../assets/js/request.js'

export default {
  components: { MyDjiTopNav, BottomNav },
  data() {
    return {
      order:'',
      remainingTime:0,
      day:0,
      hours:0,
      minutes:0,
      seconds:0

    }
  },
  computed: {
    price() {
      if(this.order) {
        return this.order.goods_info.reduce((num,prod)=>num + prod.price*prod.num,0)
      }
    },
    post_code() {
      if(this.order) {
        if(!this.order.s_address.post_code) {
          return '000000'
        }else {
          return this.order.s_address.post_code
        } 
      }
    }
    // time() {
    //   let time = new Date();
    //   // let now = time.getTime;
    //   this.remainingTime = this.order.order_time + 60*60*24 - time
    // }
  },
  methods: {
    // 获取动态时间
    getTime() {
      setTimeout(()=>{
        if(this.order) {
          let now = new Date().getTime();
          this.remainingTime = +this.order.order_time + 60*60*24*1000 - now;
          console.log(this.order.order_time);
          console.log(60*60*24);
          console.log(now);
          let timer = setInterval(()=>{
            this.remainingTime -= 1000;
            this.day = parseInt(this.remainingTime/1000/60/60/24)
            this.hours = parseInt(this.remainingTime/1000/60/60%24);
            this.minutes = parseInt(this.remainingTime/1000/60%60);
            this.seconds = parseInt(this.remainingTime/1000%60);
            if(!this.day && !this.hours && !this.minute && !this.seconds) {
              clearInterval(timer)
            }
          },1000)
        }
      },500) 
    }
  },
  async created() {
    // 初始化时触发getTime
    this.getTime();
    // 初始化时获取订单信息
    console.log(this.$route.params.id);
    let res = await getOrder(this.$route.params.id);
    console.log(res);
    this.order = res;
  }
}
</script>

<style lang="scss">
.order {
  .container {
    background-color: white;
    .order_main {
      margin: 24px auto 42px;
      padding: 56px 108px;
      text-align: left;
      font-size: 18px;
      .order_info {
        display: flex;
        justify-content: space-between;
        .info_left {
          display: flex;
          .img {
            img {
              width: 72px;
            }
          }
          .order_number {
            margin-left: 24px;
            // display: flex;
            // flex-direction: column;
            // justify-content: space-between;
            span {
              display: block;
              margin-bottom: 12px;
            }
            .remaining {
              color: red;
              font-size: 14px;
            }
          }
        }
        .info_right {
          display: flex;
          flex-direction: column;
          align-items: flex-end;
          .total_price {
            color: #44a8f2;
            font-size: 24px;
          }
          .ant-collapse-icon-position-left {
            background-color: white;
            width: 120px;
            border: 0;
            margin-right: -16px;
            .ant-collapse-item {
              border: 0;
              .ant-collapse-header {
                border: 0;
              }
              .ant-collapse-content {
                width: (1226-216)px;
                margin-left: -906px;
                .info_detail {
                  padding: 24px;
                  .info,
                  .products {
                    display: block;
                    margin-bottom: 8px;
                    // width: 150px;
                    .price {
                      display: inline;
                    }
                  }
                  .products {
                    display: flex;
                    .prod {
                      display: block;
                    }
                  }
                }
              }
            }
            
          }
        }
      }
      .payment {
        h3 {
          font-size: 18px;
          font-weight: 600;
        }
        .platform {
          margin: 16px 0;
          display: flex;
          .weixin,
          .alipay {
            width: 255px;
            border: 1px solid #cccccc;
            display: flex;
            padding: 14px;
            margin-right: 12px;
            box-sizing: content-box;
            .img {
              img {
                width: 36px;
              }
            }
            span {
              font-size: 16px;
              line-height: 36px;
              margin-left: 16px;
              vertical-align: middle;
              .tips {
                font-size: 12px;
                margin-left: 8px;
              }
            }
          }
          .weixin:hover,
          .alipay:hover {
              border: 1px solid black;
            }
        }
      }
    }
  }
}
</style>